<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#slider{
			width: 400px;
			height: 40px;
			border: 1px solid #000;
			position: absolute;
			text-align: center;
			left: 100px;
			top: 100px;
		}
		.huakuai{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 40px;
			background: green;
			cursor: move;
		}
		.unselect{
			-moz-user-select:none;
			-webkit-user-select:none;
			-ms-user-select:none;
			user-select:none;
		}
		.ani{
			transition:all .3s;
		}
	</style>
</head>
<body>
	<!--[if it IE 8]>
	请您升级浏览器，以得到更好的浏览体验
	<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
	<![endif]-->
	<div id="slider">
		<div class="green"></div>
		<div class="slidertext" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
		<div class="huakuai"></div>
	</div>
	<script type="text/javascript" src="../register/js/jquery.min.js"></script>
	<!-- <script type="text/javascript" src="slider.js"></script> -->
	<script type="text/javascript">
			alert(1);
		    var slider=function(box,opt){
		        this.box=box;
		        this.options=$.extend({},slider.defaults,opt);
				var width = box.offsetWidth;
				var max = width - $("."+this.options.huakuai)[0].offsetWidth;
		        $(box).find("."+this.options.huakuai).bind("mousedown",{"options":this.options,"box":box,"max":max,"width":width,"this":this},this.method);
		        this.prototype.method=function(options){
		        	var e = options || window.event,
		        		opt=e.data.options;
		        	console.log($("."+opt.huakuai)[0].offsetLeft)
			        $(e.data.box).addClass('unselect');
			        startX = e.clientX-$("."+opt.huakuai)[0].offsetLeft;
			        console.log(startX);
					$(document).on('mouseup', function() {
						$(document).off('mousemove',slider.prototype.move);
						$(document).off('mouseup',slider.prototype.up);
					});
			        $(document).bind('mousemove',{"options":opt,"box":e.data.box,"max":e.data.max,"width":e.data.width,"this":e.data.this},slider.prototype.move);
			        $(document).bind('mouseup',{"options":opt,"box":e.data.box,"max":e.data.max,"width":e.data.width,"this":e.data.this},slider.prototype.up);
			        return false;
		        }
		    }
		    
		    slider.defaults={
		        huakuai:"huakuai",
		        bg:"green"
		    }
		    slider.
		   //  slider.prototype={
		   //      method:function(options){
		   //      	var e = options || window.event,
		   //      		opt=e.data.options;
		   //      	console.log($("."+opt.huakuai)[0].offsetLeft)
			  //       $(e.data.box).addClass('unselect');
			  //       startX = e.clientX-$("."+opt.huakuai)[0].offsetLeft;
			  //       console.log(startX);
					// $(document).on('mouseup', function() {
					// 	$(document).off('mousemove',slider.prototype.move);
					// 	$(document).off('mouseup',slider.prototype.up);
					// });
			  //       $(document).bind('mousemove',{"options":opt,"box":e.data.box,"max":e.data.max,"width":e.data.width,"this":e.data.this},slider.prototype.move);
			  //       $(document).bind('mouseup',{"options":opt,"box":e.data.box,"max":e.data.max,"width":e.data.width,"this":e.data.this},slider.prototype.up);
			  //       return false;
		   //      },
		   //      move:function(options){
		   //      	var e = options || window.event;
		   //      	var shuju=e.data;
		   //      	var max=shuju.max;
					// lastX = e.clientX - startX;
					// lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max，巧妙写法
					// shuju.this.lastX=lastX;
					// shuju.this.max=max;
					// //console.log('lastX: ' + lastX + ' px');
					// if (lastX >= max) {
					// 	$(shuju.box).find("."+shuju.options.huakuai).addClass('handler_ok_bg');
					// 	$(shuju.box).addClass('slide_ok');
					// 	console.log(lastX,max)
					// 	//dog.off(handler,'mousedown',down);
					// 	$(shuju.box).find("."+shuju.options.bg).off('mousedown',slider.prototype.method);
					// 	$(shuju.box).find(".drag_text").text("验证码已发送");
					// 	slider.prototype.up(options);
					// 	//alert(lastX)
					// }
					// $(shuju.box).find("."+shuju.options.bg).css("width",lastX);
					// $(shuju.box).find("."+shuju.options.huakuai).css("left",lastX);
		   //      },
		   //      up:function(options){
					// var e = options || window.event;
					// var shuju=e.data;
		   //      	console.log(shuju.this.lastX+"..."+shuju.width)
					// $(shuju.box).removeClass('unselect');
					// if (shuju.this.lastX < shuju.this.max-5) {
					// 	console.log("未成功")
					// 	$(shuju.box).find("."+shuju.options.bg).addClass('ani');
					// 	$(shuju.box).find("."+shuju.options.huakuai).addClass('ani');
					// 	$(shuju.box).find("."+shuju.options.bg).css('width',0);
					// 	$(shuju.box).find("."+shuju.options.huakuai).css('left',0);
					// 	setTimeout(function() {
					// 		$(shuju.box).find("."+shuju.options.bg).removeClass('ani');
					// 		$(shuju.box).find("."+shuju.options.huakuai).removeClass('ani');
					// 	},300);
					// }else {
					// 	console.log("成功")
					// }
					// $(document).off('mousemove',slider.prototype.move);
					// $(document).off('mouseup',slider.prototype.up);
		   //      }
		   //  }
		    
		   //  function plguin(options){
		   //      return this.each(function () {
		   //          var oslider = new slider(this,options);
		   //      })
		   //  }
		    
		   //  $.fn.slider=plguin;
		// $("#slider").slider();
	</script>
</body>
</html>